<template>
  <div>
    <a href="/RaceList">返回列表</a>

    <h1> {{ race.id }}. {{ race.name }}</h1>

    <div id="main-div" style="width: 100vw; height:400px;">main-div</div>
  </div>
</template>


<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      race: {}
    }
  },

  mounted() {
    this.loadRace()
    this.loadLogList()
  },

  methods: {
    loadRace() {
      $post_form("/quant/race-by-id", {
        id: this.$route.query.id
      }).then(res => {
        this.race = res.data
      })
    },

    loadLogList() {
      $post_form("/quant/race-log-list", {
        raceId: this.$route.query.id
      }).then(res => {
        var xAxis_data = []
        var series_data_volume = []
        var series_data_price = []
        var series_data_stock = []
        var series_data_balance = []

        console.log("#21 res.data=", res.data)

        for (var i = 0; i < res.data.length; i++) {
          xAxis_data.push(i)
          series_data_price.push(res.data[i].price) // 价格
          series_data_volume.push(res.data[i].volume) // 交易量
          series_data_stock.push(res.data[i].stock) // 持仓
          series_data_balance.push(res.data[i].balance) // 盈利
        }

        this.echarts_init(xAxis_data, series_data_volume, series_data_balance, series_data_price, series_data_stock)
      })
    },

    echarts_init(xAxis_data, series_data_volume, series_data_balance, series_data_price, series_data_stock) {
      var myChart = echarts.init(document.getElementById('main-div'))

      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['价格', '交易量', '持仓', '盈利']
        },
        xAxis: {
          type: 'category',
          data: xAxis_data
        },
        yAxis: [{
          type: 'value',
          name: '价格'
        },
        {
          type: 'value',
          name: '交易量',
          position: 'left',
          offset: 60
        },
        {
          type: 'value',
          name: '持仓'
        },
        {
          type: 'value',
          name: '盈利',
          offset: 60
        }],
        series: [
          {
            name: '价格',
            type: 'line',
            yAxisIndex: 0,
            data: series_data_price
          },
          {
            name: '交易量',
            type: 'line',
            yAxisIndex: 1,
            data: series_data_volume
          },
          {
            name: '持仓',
            type: 'line',
            yAxisIndex: 2,
            data: series_data_stock
          },
          {
            name: '盈利',
            type: 'line',
            yAxisIndex: 3,
            data: series_data_balance
          }
        ]
      }

      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>